<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
        window.onresize = function () {
            document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
        }
    </script>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- loggind -->
    <div class="lodding" style="display: none">
        <div class="rider"></div>
        <div class="progress"></div>
        <div class="info"></div>
        <div class="logo"></div>
        <div class="copyright"> @2017 BaiDu Waimai Produced</div>
    </div>
    <!-- welcome -->
    <div class="welcome" style="display: none">
        <!-- title -->
        <div class="info">
            <div class="hello"></div>
        </div>
        <!-- 云 -->
        <div class="cloud"></div>
        <!-- 大草地 -->
        <div class="grass1"></div>
        <!-- 熊+烟 -->
        <div class="bear-box">
            <div class="bear"></div>
            <div class="smoke"></div>
        </div>
        <!-- 树 -->
        <div class="trees"></div>
        <!-- 草 -->
        <div class="grass2"></div>
        <!-- 按钮+外圈 -->
        <div class="rotate-bnt-box">
            <div class="btn"></div>
            <div class="circle1"></div>
            <div class="circle2"></div>
        </div>

    </div>

    <!-- swiper -->
    <div class="waimai-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
                <div class="title">
                    <h3>生活中,</h3>
                    <p>经常会有这种时候...</p>
                    <div class="line"></div>
                </div>
                <div class="scroll-page1" style="display: none">
                    <div class="bg"></div>
                    <div class="person">
                        <!-- 桌上文件 -->
                        <div class="files">
                            <!-- 纸1 -->
                            <div class="paper1"></div>
                            <!-- 纸2 -->
                            <div class="paper2"></div>
                        </div>
                    </div>
                    <div class="message-contanier">
                        <div class="info"></div>
                    </div>
                </div>
                <div class="scroll-page2" style="display: none">
                    <div class="bg"></div>
                    <div class="person">
                        <div class="leg1"></div>
                        <div class="leg2"></div>
                    </div>
                    <div class="sphere"></div>
                    <div class="message-contanier">
                        <div class="info"></div>
                    </div>
                </div>
                <div class="scroll-page3">
                    <div class="bg"></div>
                    <div class="person">
                        <div class="word1"></div>
                        <div class="word2"></div>
                        <div class="word3"></div>
                        <div class="word4"></div>
                    </div>
                    <div class="sphere"></div>
                    <div class="message-contanier">
                        <div class="info"></div>
                    </div>
                </div>
                <div class="sphere"></div>
                <div class="bear"></div>
            </div>
            <div class="swiper-slide page2">
                <div class="title">
                    <h3>这时候,</h3>
                    <p>如果有一份美味的外卖...<br>刚好出现...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="bear">
                    <div class="face1"></div>
                    <div class="face2"></div>
                    <div class="hand-left"></div>
                    <div class="hand-right"></div>
                </div>
                <div class="sphere"></div>
                <div class="table"></div>
                <div class="food"></div>
            </div>
            <div class="swiper-slide page3">
                <div class="title">
                    <h3>这时候,</h3>
                    <p>如果有一份地沟油炒饭...<br>刚好送到😱...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="bear"></div>
                <div class="sphere"></div>
                <div class="license"></div>
                <div class="oil"></div>
                <div class="evil"></div>
            </div>
            <div class="swiper-slide page4">
                <div class="title">
                    <h3>百度外卖,</h3>
                    <p>只做有品质的外卖...<br>操作快捷😝...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="bear"></div>
                <div class="sphere"></div>
                <div class="card1"></div>
                <div class="card2"></div>
                <div class="card3"></div>
            </div>
            <div class="swiper-slide page5">
                <div class="title">
                    <h3>无论前方,</h3>
                    <p>狂风, 大雨, 还是飘雪...<br>始终坚持在路上😎...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="bear">
                    <div class="smoke"></div>
                </div>
                <div class="sphere"></div>
            </div>
            <div class="swiper-slide page6">
                <div class="title">
                    <h3>丰富礼品,</h3>
                    <p>让你边吃, 边省钱😍...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="bear">
                    <div class="gift-box">
                        <div class="gift1"></div>
                        <div class="gift2"></div>
                        <div class="gift3"></div>
                        <div class="gift4"></div>
                        <div class="gift5"></div>
                        <div class="gift6"></div>
                        <div class="gift7"></div>
                        <div class="gift8"></div>
                        <div class="gift9"></div>
                        <div class="gift10"></div>
                        <div class="gift11"></div>
                        <div class="gift12"></div>
                    </div>
                </div>
                <div class="sphere"></div>
                <div class="cloud"></div>
            </div>
            <div class="swiper-slide page7">
                <div class="title">
                    <h3>所有的努力,</h3>
                    <p>就是为了健康美味的外卖...<br>呈现给你😍...</p>
                    <div class="line"></div>
                </div>
                <div class="streetlight">
                    <div class="light"></div>
                </div>
                <div class="motobike"></div>
                <div class="bear"></div>
                <div class="sphere"></div>
                <div class="share"></div>
                <div class="info">waimai.baidu.com</div>
            </div>
        </div>
    </div>

    <script src="lib/swiper.min.js"></script>
    <script src="lib/zepto.js"></script>
    <script src="lib/event.js"></script>
    <script src="lib/touch.js"></script>
    <script src="lib/fx.js"></script>
    <script src="lib/fx_methods.js"></script>

    <script>
        var swiper = new Swiper('.waimai-container', {
            direction: 'vertical'
        })
    </script>
</body>

</html>